<template>
  <!-- 主页内容 -->
  <div class="app-container">
    <div class="container">
      <el-row :gutter="20">
        <!-- 左侧 -->
        <el-col :span="17">
          <!-- 轮播 -->
          <el-carousel indicator-position="outside">
            <el-carousel-item v-for="item in 4" :key="item">
              <img src="../assets/images/swaper1.png" width="100%" alt="" />
              <div class="carousel-title">TCP/IP四层模型中各层中的重点协议{{ item }}</div>
            </el-carousel-item>
          </el-carousel>
          <!-- 文章 -->
          <div class="section" v-for="item in 10" :key="item">
            <a :href="'/blog/' + item" class="blog-title"
              >TCP/IP四层模型中的重点协议</a
            >
            <div class="item">
              <div class="content">
                <a :href="'/blog/' + item">
                  <p class="desc">
                    TCP/IP四层模型中各层中的重点协议，三次握手、四次挥手
                    TCP/IP四层模型中各层中的重点协议，三次握手、四次挥手
                    TCP/IP四层模型中各层中的重点协议，三次握手、四次挥手
                    TCP/IP四层模型中各层中的重点协议，三次握手、四次挥手
                    TCP/IP四层模型中各层中的重点协议，三次握手、四次挥手
                    TCP/IP四层模型中各层中的重点协议，三次握手、四次挥手
                    TCP/IP四层模型中各层中的重点协议，三次握手、四次挥手
                    TCP/IP四层模型中各层中的重点协议，三次握手、四次挥手
                  </p>
                </a>
                <div class="operation">
                  <div class="operation-b">
                    <i class="iconfont icon-cai"></i>
                    <span class="num">2赞</span>
                    <i class="iconfont icon-dianzan"></i>
                    <span class="num">踩</span>
                  </div>
                  <div class="operation-c">小伙伴本</div>
                </div>
              </div>
              <div class="right">
                <a href="">
                  <img src="../assets/images/swaper2.png" alt="" class="img" />
                </a>
              </div>
            </div>
          </div>
        </el-col>
        <!-- 右侧 -->
        <el-col :span="7">
          <!-- 创作话题 -->
          <div class="creative">
            <div class="compont-title">
              <div class="top-title">
                <h3>创作话题</h3>
              </div>
            </div>
            <div class="creative-content">
              <div class="creative-item" v-for="item in 4" :key="item">
                <a href="" class="creative-item-title">
                  <p class="text">
                    <i class="el-icon-info"></i>
                    <span class="white-space">前端面试宝典</span>
                  </p>
                  <p class="desc white-space">
                    众人拾柴火焰高，邀你一起共筑前端面试宝典
                  </p>
                </a>
                <div class="creative-item-bottom">
                  <span>578 人发布 </span>
                  <a href="" class="btn-box">去创作</a>
                </div>
              </div>
            </div>
          </div>
          <!-- 竞赛平台 -->
          <div class="competition">
            <div class="compont-title">
              <div class="top-title">
                <h3>竞赛平台</h3>
              </div>
              <a href="">
                更多
                <i class="el-icon-arrow-right"></i>
              </a>
            </div>
            <div class="competition-content">
              <a href="" class="competition-item-box">
                <img src="../assets/images/swaper2.png" alt="" />
                <div class="item-text white-space2">
                  2022 CSDN OpenHarmony应用学习挑战赛
                </div>
                <p class="item-prize">
                  <span class="white-space1">
                    奖品：HUAWEI MatePad 11 华为平板电脑
                  </span>
                </p>
                <div class="item-desc white-space1">
                  公益学习赛 主办单位CSDN
                </div>
              </a>
            </div>
          </div>
          <!-- 社区推荐 -->
          <div class="community">
            <div class="compont-title">
              <div class="top-title">
                <h3>社区推荐</h3>
              </div>
            </div>
            <div class="community-content">
              <div class="community-item" v-for="item in 4" :key="item">
                <a href="" class="community-item-img"></a>
                <dl>
                  <dd>
                    <a href="" class="">.NET社区</a>
                  </dd>
                  <dt>
                    <span>原创 66.8w+</span>
                    <span>粉丝 5.9w+</span>
                  </dt>
                </dl>
              </div>
            </div>
          </div>
          <!-- 友情链接 -->
          <div class="links">
            <div class="compont-title">
              <div class="top-title">
                <h3>友情链接</h3>
              </div>
            </div>
            <div class="content">
              <a href="" v-for="item in 9" :key="item">视觉中国</a>
            </div>
          </div>
          <!-- 推荐专题 -->
          <div class="special">
            <div class="compont-title">
              <div class="top-title">
                <h3>推荐专题</h3>
              </div>
              <a href="">
                更多
                <i class="el-icon-arrow-right"></i>
              </a>
            </div>
            <div class="special-content">
              <div class="special-item" v-for="item in 4" :key="item">
                <a href="">
                  <div class="image">
                    <img src="../assets/images/swaper2.png" alt="" />
                  </div>
                  <p class="text">NVIDIA DOCA 开发者专区开发者专区</p>
                </a>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
.app-container {
  margin-top: 20px;
}
.carousel-title {
  cursor: pointer;
  position: absolute;
  z-index: 10;
  bottom: 0px;
  height: 40px;
  width: 100%;
  line-height: 40px;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
}
.section {
  width: 100%;
  border-bottom: 1px solid #f0f0f2;
  margin-left: -10px;
  margin-right: -10px;
  padding: 15px 10px 0;
  .blog-title {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 500;
    color: #222226;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-height: 25px;
  }
  .item {
    padding-bottom: 15px;
    display: flex;

    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-flow: row-reverse;
    flex-flow: row-reverse;
    .content {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      .desc {
        font-size: 14px;
        font-weight: 400;
        color: #555666;
        overflow: hidden;
        white-space: normal;
        word-break: break-word;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .operation {
        display: flex;
        align-items: center;
        margin-top: 14px;
        .num {
          min-width: 22px;
          text-align: start;
          font-size: 14px;
          padding-right: 24px;
          padding-left: 4px;
          color: #555666;
          line-height: 20px;
        }
        .operation-c {
          font-size: 14px;
        }
      }
    }
    .right {
      margin-right: 16px;
      display: flex;
      align-items: flex-start;
      padding-top: 2px;
      a {
        position: relative;
        border-radius: 2px;
        width: 134px;
        height: 84px;
        display: inline-block;
        background-size: cover;
        background-position: 50%;
        border: 1px solid #f5f6f7;
        overflow: hidden;
        background: #f5f6f7;
        .img {
          width: 100%;
          left: 50%;
          top: 50%;
          -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          height: auto;
          position: absolute;
        }
      }
    }
  }
}

.creative {
  margin-bottom: 16px;
  background: #fff;
  border-radius: 2px;
  border: 1px solid #f0f0f2;

  .creative-content {
    padding: 0px 24px 24px;
    .white-space {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      word-break: break-all;
    }
    .creative-item {
      margin-top: 20px;
      .text {
        display: flex;
        align-items: center;
        i {
          width: 16px;
          height: 16px;
          margin-right: 4px;
        }
        span {
          line-height: 20px;
          flex: 1;
          font-size: 14px;
          color: #222226;
        }
      }
      .creative-item-title {
        .desc {
          font-size: 12px;
          color: #555666;
          margin-top: 4px;
        }
      }
      .creative-item-bottom {
        display: flex;
        -webkit-box-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        align-items: center;
        margin-top: 4px;
        span {
          margin-top: 2px;
          font-size: 12px;
          color: #999aaa;
        }
        .btn-box {
          width: 56px;
          height: 20px;
          background: #fff;
          border-radius: 12px;
          border: 1px solid #ccccd8;
          font-size: 12px;
          color: #555666;
          text-align: center;
          line-height: 19px;
        }
      }
    }
  }
}

.community {
  margin-bottom: 16px;
  border-radius: 2px;
  background: #fff;
  border: 1px solid #f0f0f2;
  .community-content {
    padding-bottom: 16px;
    .community-item {
      display: flex;
      padding: 16px 24px 0;
      a.community-item-img {
        width: 120px;
        height: 68px;
        border-radius: 2px;
        border: 1px solid #e8e8ed;
        margin-right: 8px;
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
      }
      dl {
        -ms-flex: 1;
        flex: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        dd {
          a {
            font-size: 14px;
            font-weight: 400;
            color: #222226;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            word-break: break-all;
          }
        }
        dt {
          margin-top: 4px;
          font-size: 12px;
          font-weight: 400;
          color: #999aaa;
          span:first-child {
            margin-right: 24px;
          }
        }
      }
    }
    .community-item:first-child {
      padding-top: 16px;
    }
  }
}
.links {
  background: #fff;
  margin-bottom: 16px;
  border-radius: 2px;
  border: 1px solid #f0f0f2;
  .content {
    padding: 0 8px 24px 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    a {
      padding: 6px 16px;
      margin-right: 16px;
      border-radius: 2px;
      font-size: 14px;
      border: 1px solid #e8e8ed;
      margin-top: 16px;
      font-weight: 400;
      color: #555666;
    }
  }
}
.competition {
  background: #fff;
  margin-bottom: 16px;
  border-radius: 2px;
  border: 1px solid #f0f0f2;
  .competition-item-box:last-child {
    .item-desc {
      margin-bottom: 0;
    }
  }
  .competition-content {
    padding: 16px 24px 24px;
    .item-desc {
      font-size: 12px;
      color: #999aaa;
      margin-bottom: 16px;
    }
    img {
      width: 100%;
      margin-bottom: 4px;
      border-radius: 2px;
    }
    .item-text {
      font-size: 14px;
      color: #222226;
      margin-bottom: 4px;
    }
    .white-space2 {
      overflow: hidden;
      white-space: normal;
      word-break: break-all;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .item-prize {
      font-size: 14px;
      color: #823708;
      background: #fff4e5;
      border-radius: 2px;
      width: 100%;
      height: 26px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      margin-bottom: 6px;
      padding: 0 8px;
      span {
        font-size: 12px;
      }
    }
    .white-space1 {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      word-break: break-all;
    }
  }
}
.special {
  background: #fff;
  margin-bottom: 16px;
  border-radius: 2px;
  border: 1px solid #f0f0f2;
  .special-content {
    padding: 0px 24px 24px;
    .special-item {
      position: relative;
      margin-top: 20px;
      .image {
        img {
          width: 120px;
          height: 68px;
          margin-right: 8px;
          border-radius: 2px;
          border: 1px solid #f5f6f7;
        }
      }
      .text {
        display: -ms-flexbox;
        display: flex;
        font-size: 14px;
        font-weight: 400;
        height: 42px;
        color: #222226;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-all;
      }
    }
    .special-item > a {
      display: flex;
    }
  }
}
</style>
